<template>
	<view class="container">
	  <button @click="chooseImage">上传图片</button>
	  <image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-image"></image>
	</view>
  </template>
  
  <script>
  export default {
	props:{
			zuopinjiId:{
				type: String,
				required: true
			}
		} ,
	data() {
	  return {
		imageUrl: '',
		
	  };
	},
	methods: {
	  chooseImage() {
		uni.chooseImage({
		  count: 1, // 选择图片的数量
		  sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
		  sourceType: ['album', 'camera'], // 从相册选择或使用相机
		  success: (res) => {
			const tempFilePaths = res.tempFilePaths;
			this.uploadImage(tempFilePaths[0]);
		  },
		  fail: (err) => {
			console.error('选择图片失败', err);
		  }
		});
	  },
	  uploadImage(filePath) {
		uni.uploadFile({
		  url: 'http://1.92.82.82:3001/upload/image', // 后台接口地址
		  filePath: filePath,
		 formData:{ CreationId:this.zuopinjiId},
		  name: 'image', // 文件对应的 key
		//   header: {
		// 	'Content-Type': 'multipart/form-data'
		//   },
		  success: (uploadRes) => {
			const response = JSON.parse(uploadRes.data);
			console.log(response);
			if (response.code==1) {
			//   this.imageUrl = response.url; // 假设后台返回的图片 URL 存在于 response.url 中
			  uni.showToast({
				title: '上传成功',
				icon: 'success'
			  });
			  this.$emit('init')
			} else {
			  uni.showToast({
				title: '上传失败',
				icon: 'error'
			  });
			}
		  },
		  fail: (err) => {
			console.error('上传图片失败', err);
			uni.showToast({
			  title: '上传失败',
			  icon: 'error'
			});
		  }
		});
	  }
	}
  };
  </script>
  
  <style scoped>
  .container {

	position: absolute;
	bottom: 10upx;
	left: calc(50% - 150upx);
  }
  
  button {
	/* margin-bottom: 20px; */
	width: 300upx;
	border: 2upx solid #47494a;
	
  }
  
  .preview-image {
	width: 100%;
	max-width: 300px;
	height: auto;
  }
  </style>